html body {
  .apply-typography();
  .apply-print();
}

html body[for='html-export'] {
  .apply-color(#363636, #fafafa, #895bf5);
}

html body:not([for='html-export']) {
  .apply-color(#bababa, #1e1e1e, #895bf5);
}

/* 
 * ==============================================
 * 基础语法 颜色 设置
 * ==============================================
 */
.apply-color(@fg, @bg, @primary) {
  @fg-strong: if(lightness(@fg) > 50%, lighten(@fg, 10%), darken(@fg, 10%));
  @fg-subtle: if(lightness(@fg) > 50%, lighten(@fg, 5%), darken(@fg, 5%));
  @fg-ragular: @fg;
  @fg-weak: if(lightness(@fg) > 50%, darken(@fg, 20%), lighten(@fg, 20%));
  @border: if(lightness(@bg) > 50%, darken(@bg, 30%), lighten(@bg, 30%));
  @blockquote-bg: if(lightness(@bg) > 50%, darken(@bg, 5%), lighten(@bg, 5%));

  color: @fg-ragular;
  background-color: @bg;

  /* ------- Headings start ------- */
  h1,
  h2 {
    color: @fg-strong;
  }
  h3,
  h4,
  h5,
  h6 {
    color: @fg-subtle;
  }
  /* ------- Headings end ------- */

  /* ------- Emphasis start ------- */
  strong,
  b {
    color: if(
      lightness(@bg) > 50%,
      darken(#f97930, 16%),
      lighten(#f97930, 16%)
    );
  }

  del,
  s {
    color: @fg-weak;
  }

  mark {
    background-color: if(lightness(@bg) > 50%, lighten(#786512, 40%), #786512);
    color: @fg-strong;
  }
  /* ------- Emphasis end ------- */

  /* ------- Link start ------- */
  a {
    color: if(lightness(@bg) > 50%, @primary, lighten(@primary, 8%));
    &:hover {
      color: if(
        lightness(@bg) > 50%,
        lighten(@primary, 8%),
        lighten(@primary, 16%)
      );
    }
  }
  /* ------- Link end ------- */

  .task-list-item-checkbox:checked {
    background-color: @primary;
  }

  /* ------- Blockquotes start ------- */
  blockquote {
    color: @fg-subtle;
    background-color: @blockquote-bg;
    border-left: 2px solid lighten(@primary, 16%);
  }
  /* ------- Blockquotes end ------- */

  /* ------- HR start ------- */
  hr {
    background-color: @border;
  }
  /* ------- HR end ------- */

  /* ------- Table start ------- */
  table {
    th {
      color: @fg-subtle;
    }
    td,
    th {
      border: 1px solid @border;
    }
  }
  /* ------- Table end ------- */

  /* ------- Code start ------- */
  code {
    color: @fg-subtle;
  }
  .highlight pre,
  pre {
    border: @border;
  }
  /* ------- Code end ------- */

  /* ------- KBD start ------- */
  kbd {
    color: @fg-subtle;
    border: 1px solid @border;
    border-bottom: 2px solid darken(@border, 6%);
    background-color: if(
      lightness(@bg) > 50%,
      darken(@bg, 8%),
      lighten(@bg, 8%)
    );
  }
  /* ------- KBD end ------- */
}

/* 
 * ==============================================
 * 基础语法 排版 设置
 * ==============================================
 */
.apply-typography() {
  @margin: 16px;

  font-family: '思源宋体 Light', sans-serif;
  font-size: 18px;

  line-height: 1.6;

  overflow: initial;
  box-sizing: border-box;
  word-wrap: break-word;

  & > :first-child {
    margin-top: 0;
  }

  /* ------- Headings start ------- */
  h1 {
    font-family: '思源宋体 Heavy', sans-serif;

    font-size: 24px;
    font-weight: 900;

    line-height: 1.8;
    margin-top: 0.5em;
    padding-bottom: 0.2em;
  }

  h2 {
    font-family: '思源宋体', sans-serif;

    font-size: 20px;
    font-weight: bold;

    line-height: 1.7;
    margin-top: 0.5em;
    padding-bottom: 0.2em;
  }

  h3,
  h4,
  h5,
  h6 {
    font-family: '思源宋体', sans-serif;

    font-size: 18px;

    line-height: 1.6;
    margin-top: 0.3em;
    padding-bottom: 0.1em;
  }
  /* ------- Headings end ------- */

  /* ------- Link start ------- */
  a {
    &:hover {
      text-decoration: underline;
    }

    &[href^='#'] {
      text-decoration: none;
    }

    &:not([href^='#']) {
      text-decoration-line: underline;

      &::after {
        content: '';
        display: inline-block;
        width: 0.9em;
        height: 0.9em;
        position: relative;
        right: 0;
        top: 50%;
        transform: translateY(-20%);
        margin-left: 0.2em;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23CCBBFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
  /* ------- Link end ------- */

  /* ------- Image start ------- */
  img {
    max-width: 100%;
  }
  /* ------- Image end ------- */

  /* ------- Paragraph start ------- */
  & > p {
    margin-top: 0;
    margin-bottom: @margin;
    word-wrap: break-word;
  }
  /* ------- Paragraph end ------- */

  /* ------- List start ------- */
  & > ul,
  & > ol {
    margin-bottom: @margin;
  }

  ul,
  ol {
    padding-left: 2em;

    &.no-list {
      padding: 0;
      list-style-type: none;
    }
  }

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    margin-bottom: 0;

    &.task-list-item {
      list-style: none;
    }
  }

  li > p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .task-list-item-checkbox {
    height: 16px;
    width: 16px;
    border-radius: 5px;
    margin: 0 0.2em 0.25em -1.8em;
    vertical-align: middle;

    &:hover {
      cursor: pointer;
    }
  }
  /* ------- List end ------- */

  /* ------- Blockquotes start ------- */
  blockquote {
    margin: @margin 0;
    font-size: inherit;
    padding: 0 15px;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
  /* ------- Blockquotes end ------- */

  /* ------- HR start ------- */
  hr {
    height: 1px;
    margin: @margin*2 0;
    border: 0 none;
  }
  /* ------- HR end ------- */

  /* ------- Table start ------- */
  table {
    margin: 10px 0 15px 0;
    border-collapse: collapse;
    border-spacing: 0;

    display: block;
    width: 100%;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;

    th {
      font-family: '思源宋体 Medium', sans-serif;
      font-weight: 500;
    }

    td,
    th {
      padding: 6px 13px;
    }
  }
  /* ------- Table end ------- */

  /* ------- Definition List start ------- */
  dl {
    padding: 0;

    dt {
      padding: 0;
      margin-top: 16px;
      font-size: 1em;
      font-style: italic;
      font-weight: bold;
    }

    dd {
      padding: 0 16px;
      margin-bottom: 16px;
    }
  }
  /* ------- Definition List end ------- */

  /* ------- Code start ------- */
  code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    border-radius: 3px;
    padding: 0.2em 0;

    &::before,
    &::after {
      letter-spacing: -0.2em;
      content: '\00a0';
    }
  }
  pre > code {
    padding: 0;
    margin: 0;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }

  .highlight {
    margin-bottom: @margin;
  }

  .highlight pre,
  pre {
    padding: 1em;
    overflow: auto;
    line-height: 1.45;

    border-radius: 3px;
  }

  .highlight pre {
    margin-bottom: 0;
    word-break: normal;
  }

  pre code,
  pre tt {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;

    &:before,
    &:after {
      content: normal;
    }
  }
  /* ------- Code end ------- */

  /* ------- KBD start ------- */
  kbd {
    padding: 2px 4px;
    border-radius: 3px;
  }
  /* ------- KBD end ------- */
}

.apply-print() {
  // very nice tutorial & intro
  // https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
  @media print {
    background-color: white;
    color: black;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: black;
      page-break-after: avoid;
    }

    blockquote {
      color: black;
    }

    /*table,*/
    pre {
      page-break-inside: avoid;
    }

    table {
      display: table;
    }

    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }

    pre,
    code {
      word-wrap: break-word;
      white-space: pre;
    }
  }
}
